<template>
  <div class="industry-distribution" style="width: 500px; height: 280px;">
    <!-- 标题区域 -->
    <div class="title-bar" style="background-color: #0f2035; color: #fff; padding: 10px 15px; border-radius: 8px 8px 0 0; font-size: 16px; font-weight: bold; text-align: center;">
      重点企业行业分布情况
    </div>
    
    <!-- 内容区域 -->
    <div class="content" style="height: 220px; background-color: #0f2035; padding: 10px; border-radius: 0 0 8px 8px;">
      <div id="industryChart" style="width: 100%; height: 100%;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, onUnmounted } from 'vue';

export default {
  name: 'Zhongdian',
  setup() {
    let industryChart = null;

    onMounted(() => {
      // 初始化行业分布图表
      const chartDom = document.getElementById('industryChart');
      if (chartDom) {
        industryChart = echarts.init(chartDom);
        
        const option = {
          backgroundColor: '#0f2035',
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            show: true,
            type: 'scroll',
            orient: 'vertical',
            left: 'left',
            top: 'center',
            data: [
              { name: '企业行业1', icon: 'rect', itemStyle: { color: '#e94c4c' } },
              { name: '企业行业2', icon: 'rect', itemStyle: { color: '#47b8e0' } },
              { name: '企业行业3', icon: 'rect', itemStyle: { color: '#8bc34a' } },
              { name: '企业行业4', icon: 'rect', itemStyle: { color: '#fbb040' } },
              { name: '企业行业5', icon: 'rect', itemStyle: { color: '#409eff' } },
              { name: '企业行业6', icon: 'rect', itemStyle: { color: '#9a6dfc' } },
              { name: '企业行业7', icon: 'rect', itemStyle: { color: '#808080' } }
            ],
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          series: [
            {
              name: '企业行业分布',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold',
                  color: '#fff'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 30, name: '企业行业1', itemStyle: { color: '#e94c4c' } },
                { value: 20, name: '企业行业2', itemStyle: { color: '#47b8e0' } },
                { value: 15, name: '企业行业3', itemStyle: { color: '#8bc34a' } },
                { value: 10, name: '企业行业4', itemStyle: { color: '#fbb040' } },
                { value: 8, name: '企业行业5', itemStyle: { color: '#409eff' } },
                { value: 12, name: '企业行业6', itemStyle: { color: '#9a6dfc' } },
                { value: 5, name: '企业行业7', itemStyle: { color: '#808080' } }
              ]
            }
          ]
        };
        
        industryChart.setOption(option);
      }

      // 添加窗口大小调整事件
      window.addEventListener('resize', () => {
        if (industryChart) {
          industryChart.resize();
        }
      });
    });

    onUnmounted(() => {
      // 组件销毁时释放资源
      if (industryChart) {
        industryChart.dispose();
      }
    });

    return {};
  }
};
</script>

<style scoped>
.industry-distribution {
  width: 500px;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
}

.title-bar {
  background-color: #0f2035;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.content {
  height: 220px;
  background-color: #0f2035;
  padding: 10px;
  border-radius: 0 0 8px 8px;
}
</style>